<template>
	<view class="container">
		<bnn-loading :loading="state === 0"/>
		<view class="rule-list" v-if="state === 1">
			<view class="rule-item" v-for="item in rules">
				<view class="strategy-name">【{{item.name}}】</view>
				<view class="rule-count" v-for="count in item.data">
					<view>{{count.name}}</view>
					<view v-if="count.value == -1">无限制</view>
					<view v-else>{{count.value}}{{count.unit}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	import { getRulesDetail } from '@/api/member.js'
	export default {
		components: { BnnLoading },
		data() {
			return {
				state: 0, // 0.初始化 1.渲染完成
				id: null,
				strategyName: '',
				ruleName: {
					proportion: '跟投比例',
					max_copy_order: '最大复制单量',
					max_proportion: '最大交易手数',
					min_proportion: '最小交易手数',
					inversion: '反向跟投',
					compel_close: '强平线',
					loss_frequency: '连亏再跟'
				},
				ruleUnit: {
					proportion: '%',
					max_copy_order: '单',
					max_proportion: '手',
					min_proportion: '手',
					inversion: '',
					compel_close: '元',
					loss_frequency: '元'
				},
				rules: []
			}
		},
		onLoad(option) {
			this.id = option.id
			this.init()
		},
		methods: {
			init: function() {
				let that = this
				getRulesDetail({ids: [that.id]}).then(res => {
					if (res.code === 200) {
						let data = res.data
						if (data.length > 0) {
							let arr = []
							data.map(item=> {
								let rules = {
									name: item.name,
									data: []
								}
								Object.keys(item).map(v => {
									if (that.ruleName[v]) {
										let name = that.ruleName[v]
										let unit = that.ruleUnit[v]
										if (v === 'inversion') {
											item[v] = item[v] === '1' ? '是' : '否'
										}
										rules.data.push({
											name,
											unit,
											value: item[v]
										})
									}
								})
								arr.push(rules)
							})
							that.rules = arr
							that.state = 1
						} else {
							that.intErr('未添加规则')
						}
					} else {
						that.intErr(res.message)
					}
				}).catch(err => {
					that.intErr(err.message)
				})
			},
			// 页面加载出错
			intErr: function(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				setTimeout(()=> {
					uni.navigateBack()
				}, 1500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		// height: calc(100vh - var(--window-top));
		// background-color: #FFFFFF; //多数组时注释
	}
	.rule-list {
		overflow: hidden;
		.rule-item {
			background-color: #FFFFFF;
			padding: 8px 12px;
			margin-bottom: 20px;
			.strategy-name {
				height: 60px;
				line-height: 60px;
				font-size: 24px;
				text-align: center;
			}
			.rule-count {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				border-bottom: 1px solid #cccccc;
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>
